<template>
	<div class="page">
		<ul class="page-list" v-if="total<7">
		    <li @click="prevPage" v-if="current!=1">
		      	<a href="javascript:;">&lt;</a>
		    </li>
		    <li :class="item==current?'page-current':''" v-for="item in total" @click="toPage(item)"><a href="javascript:;">{{item}}</a></li>
		    <li @click="nextPage" v-if="current!=total">
		      	<a href="javascript:;">&gt;</a>
		    </li>
		</ul>
		<ul class="page-list" v-else>
			<li @click="prevPage" v-if="current!=1">
		      	<a href="javascript:;">&lt;</a>
		    </li>
		    <li :class="item==current?'page-current':''" v-for="item in pageArr" @click="toPage(item)"><a href="javascript:;">{{item}}</a></li>
		    <li @click="nextPage" v-if="current!=total">
		      	<a href="javascript:;">&gt;</a>
		    </li>
		</ul>
	</div>
</template>

<script>
	export default {
	  	name: 'pagination',
	  	data () {
	  		return {
	  			current: 1,
	  			pageArr: [1,2,3,4,5],
	  			heightPage: 1,
	  			lowPage: 1
	  		}
	  	},
	  	props: ['total','currentPage'],
	  	mounted: function () {
	  		this.initPage()
	  	},
	  	watch: {
	  		currentPage: function(val) {
	  			this.current = val
	  		}
	  	},
	  	computed: {

	  	},
	  	methods: {
	  		initPage() {
	  			this.heightPage = this.total;
	  		},
	  		toPage(page) {
	  			if(page == this.pageArr[this.pageArr.length-1] && page != this.heightPage) {
	  				let num = this.pageArr[2];
	  				this.pageArr = []
	  				for(let i=0; i<5; i++) {
	  					if(num + i <= this.total) {
							this.pageArr[i] = num + i
	  					}
	  				}
	  				if(this.pageArr.length != 5) {
	  					for(let i=0,len=this.pageArr.length; i<(5-len); i++) {
	  						this.pageArr.unshift(this.pageArr[0] - 1)
	  					}
	  				}
	  			}
	  			if(page == this.pageArr[0] && page != this.lowPage) {
	  				let num = this.pageArr[2];
	  				this.pageArr = []
	  				for(let i=0; i<5; i++) {
	  					if(num - i > 0) {
							this.pageArr.unshift(num - i);
	  					}
	  				}
	  				if(this.pageArr.length != 5) {
	  					for(let i=0,len=this.pageArr.length; i<(5-len); i++) {
	  						this.pageArr.push(this.pageArr[this.pageArr.length-1] + 1)
	  					}
	  				}
	  			}
	  			this.$emit('pageChange',page)
	  		},
	  		prevPage() {
	  			if(this.current == this.pageArr[0]) {
	  				let num = this.pageArr[1];
	  				this.pageArr = []
	  				for(let i=0; i<5; i++) {
	  					if(num - i > 0) {
							this.pageArr.unshift(num - i);
	  					}
	  				}
	  				if(this.pageArr.length != 5) {
	  					for(let i=0,len=this.pageArr.length; i<(5-len); i++) {
	  						this.pageArr.push(this.pageArr[this.pageArr.length-1] + 1)
	  					}
	  				}
	  			}
	  			this.$emit('pageChange',this.current-1)
	  		},
	  		nextPage() {
	  			if(this.current == this.pageArr[this.pageArr.length-1]) {
	  				let num = this.pageArr[3];
	  				this.pageArr = []
	  				for(let i=0; i<5; i++) {
	  					if(num + i <= this.total) {
							this.pageArr[i] = num + i
	  					}
	  				}
	  				if(this.pageArr.length != 5) {
	  					for(let i=0,len=this.pageArr.length; i<(5-len); i++) {
	  						this.pageArr.unshift(this.pageArr[0] - 1)
	  					}
	  				}
	  			}
	  			this.$emit('pageChange',this.current+1)
	  		},
	  	}
	}
</script>

<style>
	.page {
		margin-top: 20px; 
		overflow: hidden;
		text-align: center;
	}
	.page-list {
		display: inline-block;
	}
	.page-list li {
		list-style: none;
		float: left;
		border: 1px solid #b2afaa;
		height: 35px;
		width: 35px;
		border-radius: 50%;
		line-height: 35px;
		margin-left: 10px;
		cursor: pointer;
	}
	.page-list li a {
		color: #b2afaa;
	}
	.page-current {
		background: #ff4466;
		border: 1px solid #ff4466!important;
		
	}
	.page-current a {
		color: #fff!important;
	}
</style>